
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        canvas.width=1200;
        canvas.height=800;

        context.lineWidth=5;
        context.fillStyle="yellow";
        context.strokeStyle="#058";

   /////////////////////////////

   //        a c e
   //        b d f
   //        0 0 1
   /////////////////////////////
    // a,d 水平，垂直缩放
    // b,c 水平，垂直倾斜
    // e,f 水平，垂直位移
   /////////////////////////////
         context.save();
        context.transform(1,0,0,1.5,50,100);
        context.transform(2,0.,0,1.5,0,0);
        context.transform(1,-0.2,-0.2,1,0,0);
        context.setTransform(1,0,0,1,50,100);
        context.fillRect(50,50,300,300);
        context.strokeRect(50,50,300,300);
         context.restore();

    }
</script>
</body>
</html>